<template>
  <div class="home">
    <!-- 头部 -->
    <Header />
    <div class="body">
      <!-- 轮播图 -->
      <div class="rotation">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide><img src="@/assets/imgs/swiper1.jpg" /> </swiper-slide>
          <swiper-slide><img src="@/assets/imgs/huaju.jpeg" /> </swiper-slide>
          <swiper-slide><img src="@/assets/imgs/swiper1.jpg" /> </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>

      <!-- 宫格 -->
      <div class="navs">
        <div class="nav">
          <img src="@/assets/imgs/icon-qiandao.png" />
          <span>签到</span>
        </div>
        <div class="nav">
          <img src="@/assets/imgs/icon-fujin.png" />
          <span>附近</span>
        </div>
        <div class="nav">
          <img src="@/assets/imgs/icon-zhanhui.png" />
          <span>旅展</span>
        </div>
        <div class="nav">
          <img src="@/assets/imgs/icon-fuli.png" />
          <span>福利</span>
        </div>
        <div class="nav">
          <img src="@/assets/imgs/icon-muma.png" />
          <span>玩乐</span>
        </div>
        <div class="nav">
          <img src="@/assets/imgs/icon-xingxing.png" />
          <span>周边</span>
        </div>
        <div class="nav">
          <img src="@/assets/imgs/icon-tiyu.png" />
          <span>体育</span>
        </div>
        <div class="nav">
          <img src="@/assets/imgs/icon-qinzi.png" />
          <span>亲子</span>
        </div>
      </div>

      <!-- 热卖 -->
      <div class="hotGoods">
        <div class="tit">热 卖 商 品</div>
        <div class="wrapper">
          <!-- ul -->
          <div class="main">
            <!-- li -->
            <div class="goods">
              <div class="l">
                <img src="@/assets/imgs/zhutu.jpg" />
              </div>
              <div class="r">
                <div class="name">1</div>
                <div class="address">2</div>
                <div class="price">3</div>
              </div>
              <img class="cart" src="@/assets/imgs/car.png" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default {
  components: {
    Header,
    Footer
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted() {
    console.log("Current Swiper instance object", this.swiper);
    this.swiper.slideTo(3, 1000, false);
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";
.home {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.rotation {
  width: 100%;
  height: px2rem(150);
  overflow: hidden;

  .swiper-container,
  .swiper-slide {
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.body {
  overflow-y: scroll;
}
.navs {
  width: 100%;
  height: px2rem(174);
  background: #fff;
  display: flex;
  flex-wrap: wrap;

  .nav {
    width: 25%;
    height: px2rem(87);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    span {
      margin-top: px2rem(10);
    }
    img {
      width: px2rem(40);
      height: px2rem(40);
    }
  }
}

.hotGoods {
  width: 100%;
  min-height: px2rem(100);
  background: #fff;

  .tit {
    text-align: center;
    font-weight: bold;
    padding-left: px2rem(20);
    line-height: px2rem(40);
    // border: solid px2rem(1) #ccc;
  }

  .wrapper {
    width: 100%;
    height: px2rem(300);
    overflow: hidden;
  }
  .main {
    width: 100%;
    height: 100%;
    .goods {
      display: flex;
      background: #fff;
      padding: px2rem(10) px2rem(10);
      // border: solid px2rem(1) #ccc;
      position: relative;

      .cart {
        width: px2rem(25);
        height: px2rem(25);
        position: absolute;
        right: px2rem(10);
        bottom: px2rem(10);
      }

      .l {
        width: px2rem(80);
        height: px2rem(80);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .r {
        flex: 1;
        background: hotpink;
      }
    }
  }
}
</style>
